<template>
  <div class="purpose-box">
    <TitleBar :title="title"></TitleBar>
    <div class="purpose-content">
      <h6>
        {{subject}}
        <span class="title-bg"></span>
      </h6>
      <div class="title-lines"></div>
      <div class="definition-box">
        <div class="sub-head">
          <span class="icon purpose-icon1"></span>
          <span>定义</span>
          <span class="title-bg purpose-title-bg1"></span>
        </div>
        <p v-for="(item, index) in definitionList" :key="index">{{item}}</p>
      </div>
      <div>
        <div class="sub-head">
          <span class="icon purpose-icon2"></span>
          <span>目的</span>
          <span class="title-bg purpose-title-bg2"></span>
        </div>
        <p v-for="(item, index) in purposeList" :key="index">{{item}}</p>
      </div>
      <div class="public-top">
        <div class="sub-head">
          <span class="icon purpose-icon3"></span>
          <span>产生</span>
          <span class="title-bg purpose-title-bg3"></span>
        </div>
        <p v-for="(item, index) in produceList" :key="index">{{item}}</p>
      </div>
      <div class="public-top">
        <div class="sub-head">
          <span class="icon purpose-icon4"></span>
          <span>公正客观</span>
          <span class="title-bg purpose-title-bg4"></span>
        </div>
        <p v-for="(item, index) in objectiveList" :key="index">{{item}}</p>
      </div>
      <div class="public-top">
        <div class="sub-head">
          <span class="icon purpose-icon5"></span>
          <span>实施与监督</span>
          <span class="title-bg purpose-title-bg5"></span>
        </div>
        <p v-for="(item, index) in monitorList" :key="index">{{item}}</p>
      </div>
    </div>
    <MyFooter :introduceShow="true"></MyFooter>
  </div>
</template>
<script>
import TitleBar from '../../components/TitleBar'
import MyFooter from '../../components/MyFooter'
import * as events from '../../store/events'
export default {
  components: {
    TitleBar,
    MyFooter
  },
  data() {
    return {
      title: '活动宗旨',
      subject: null, // 标题
      definitionList: null, // 定义
      purposeList: null, // 目的
      produceList: null, // 生产
      objectiveList: null, // 公正客观
      monitorList: null // 实施与监督
    }
  },
  mounted() {
    this.$showLoading()
    this.getActivityAim()
  },
  methods: {
    getActivityAim() {
      this.$api.postActivityAim().then(data => {
        this.$hideLoading()
        if (data.data.status == 1) {
          // 活动宗旨内容
          let content = data.data.activityAim
          this.subject = content.subject
          this.definitionList = content.definition
          this.purposeList = content.purpose
          this.produceList = content.produce
          this.objectiveList = content.objective
          this.monitorList = content.monitor
          // 客服数据
          let service = {
            email: data.data.setting.service_email,
            tel: data.data.setting.service_tel
          }
          // 客服数据存到store中
          this.$store.commit(events.SET_SERVICE_INFO, service)
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.purpose-box {
  .purpose-content {
    width: 6.9rem;
    box-shadow: 0 0 0.24rem 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.08rem;
    padding: 0.64rem 0.38rem;
    margin: 0.36rem auto 0.48rem;
    h6 {
      text-align: center;
      font-size: 0.36rem;
      line-height: 0.36rem;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      position: relative;
      z-index: 99;
      .title-bg {
        display: block;
        width: 3.92rem;
        height: 0.33rem;
        background: url("../../assets/img/purpose-title-bg.png") center
          no-repeat;
        background-size: cover;
        position: absolute;
        bottom: -0.2rem;
        left: 0.74rem;
        z-index: -1;
      }
    }
    .title-lines {
      width: 0.64rem;
      height: 0.08rem;
      background: rgba(255, 215, 77, 1);
      margin: 0.5rem auto 0.86rem;
    }
    p {
      text-indent: 0.56rem;
      font-size: 0.28rem;
      color: rgba(34, 34, 34, 1);
      line-height: 0.44rem;
    }
    .sub-head {
      margin-bottom: 0.3rem;
      position: relative;
      z-index: 0;
      span {
        font-size: 0.3rem;
        font-weight: bold;
        color: rgba(34, 34, 34, 1);
        line-height: 0.44rem;
      }
      .icon {
        display: inline-block;
        vertical-align: middle;
        width: 0.32rem;
        height: 0.32rem;
        background-origin: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-right: 0.16rem;
      }
      .title-bg {
        display: inline-block;
        vertical-align: middle;
        background-origin: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 0.1rem;
      }
      .purpose-icon1 {
        background-image: url("../../assets/img/purpose-icon1.png");
      }
      .purpose-title-bg1 {
        width: 2.23rem;
        height: 0.35rem;
        background-image: url("../../assets/img/purpose-title-bg1.png");
      }
      .purpose-icon2 {
        background-image: url("../../assets/img/purpose-icon2.png");
      }
      .purpose-title-bg2 {
        width: 1.86rem;
        height: 0.34rem;
        background-image: url("../../assets/img/purpose-title-bg2.png");
      }
      .purpose-icon3 {
        background-image: url("../../assets/img/purpose-icon3.png");
      }
      .purpose-title-bg3 {
        width: 2.1rem;
        height: 0.34rem;
        background-image: url("../../assets/img/purpose-title-bg3.png");
      }
      .purpose-icon4 {
        background-image: url("../../assets/img/purpose-icon4.png");
      }
      .purpose-title-bg4 {
        width: 2.23rem;
        height: 0.35rem;
        background-image: url("../../assets/img/purpose-title-bg4.png");
      }
      .purpose-icon5 {
        background-image: url("../../assets/img/purpose-icon5.png");
        margin-right: 0.08rem;
      }
      .purpose-title-bg5 {
        margin-left: 0;
        width: 4.54rem;
        height: 0.34rem;
        background-image: url("../../assets/img/purpose-title-bg5.png");
        position: absolute;
        right: 0;
        z-index: -1;
      }
    }
    .definition-box {
      width: 6.14rem;
      min-height: 7.08rem;
      background: url("../../assets/img/purpose-definition.png") center
        no-repeat;
      background-size: cover;
    }
    .public-top {
      margin-top: 0.8rem;
    }
  }
}
</style>
